<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/icon.jpg">
    <title>计算一元三次方程</title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../css/jumbotron-narrow.css" rel="stylesheet">

    <script src="../js/math.js" charset="utf-8"></script>
    <!--layui的css-->
    <link rel="stylesheet" href="../js/layui/layui/css/layui.css" media="all" type="text/css">

    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <script src="../js/layui/layui/layui.js" charset="utf-8"></script>

    <!--自建的css文件-->
    <link href="../css/myMainCss.css" rel="stylesheet" type="text/css"/>

    <script src="../js/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="../css/handsontable.full.min.css" type="text/css"/>

</head>

<body>

<div class="container">
    <div class="header clearfix">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="presentation" class="active"><a href="#">首 页</a></li>
                <li role="presentation"><a href="#">关于我们</a></li>
            </ul>
        </nav>
        <h3 class="text-muted">简单矩阵计算</h3>
    </div>


    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" style="margin-left: 3px;">
            <li class="layui-this">点积(dot product)</li>
            <li>商</li>
            <li>逆</li>
            <li>幂</li>
            <li>叉积(cross product)</li>
            <li>行列式(det)</li>
        </ul>

        <div class="layui-tab-content" style="height: 70%; width: 90%; position: absolute; left: 5%;  ">

            <!--选项卡1内容-->
            <div class="layui-tab-item layui-show " style="position: absolute; width: 75%; height: 80%; top: 10%;   ">


                <div class="jumbotron" style="margin-bottom: 0px;">

                    <!--矩阵形状-->
                    <div>
                        <p>
                            <span>矩阵A:</span>
                            <input type="text" name="mat_a" id="input_rowNum_1_a" value="" style="width: 50px;"/>行
                            &nbsp;
                            <input type="text" name="mat_a" id="input_colNum_1_a" value="" style="width: 50px;"/>列
                        </p>

                        <p>
                            <span>矩阵B:</span>
                            <input type="text" name="mat_a" id="input_rowNum_1_b" value="" style="width: 50px;"/>行
                            &nbsp;
                            <input type="text" name="mat_a" id="input_colNum_1_b" value="" style="width: 50px;"/>列
                        </p>

                        <p>
                            <input type="button" id="but_shape_1" value="确 认 生 成 矩 阵"/>
                        </p>

                    </div>

                    <!--矩阵A-->
                    <div>
                        <p>
                            矩阵A:
                        </p>
                        <div id="myTable_1_a"></div>
                    </div>

                    <!--矩阵B-->
                    <div>
                        <p>
                            矩阵B:
                        </p>
                        <div id="myTable_1_b"></div>
                    </div>

                    <!--计算结果-->
                    <div>
                        <p>
                            <input type="button" id="but_result_1" value="点 击 计 算 结 果"/>
                        </p>
                        <p>
                            计算结果:
                        </p>

                        <div id="myTable_1_r"></div>
                    </div>


                    <!--<h1><i>a</i>x<sup>3</sup>+<i>b</i>x<sup>2</sup>+<i>c</i>x+<i>d</i>=0</h1>-->
                    <!--<p class="lead">-->
                    <!--a=<input type="text" id="a" style="width: 80px;"/>-->
                    <!--b=<input type="text" id="b" style="width: 80px;"/>-->
                    <!--c=<input type="text" id="c" style="width: 80px;"/>-->
                    <!--d=<input type="text" id="d" style="width: 80px;"/>-->

                    <!--</p>-->
                    <p><a class="btn btn-lg btn-success" href="#" role="button" style="width: 200px;" onclick="cac()">
                        计&nbsp;&nbsp;&nbsp;&nbsp; 算</a></p>

                </div>
            </div>
        </div>
    </div>


        <div class="row marketing" style="text-align: center; margin-top: 0px;">
        <h3>x<sub>1</sub>=
        <input type="text" style="width: 150px;" id="x11"/> +
        <input type="text" style="width: 150px;" id="x12"/>
        <i>i</i></h3>

        <h3>x<sub>2</sub>=
        <input type="text" style="width: 150px;" id="x21"/> +
        <input type="text" style="width: 150px;" id="x22"/>
        <i>i</i></h3>

        <h3>x<sub>3</sub>=
        <input type="text" style="width: 150px;" id="x31"/> +
        <input type="text" style="width: 150px;" id="x32"/>
        <i>i</i></h3>
        </div>

        <footer class="footer">
            <p>by kim.</p>
        </footer>

    </div> <!-- /container -->


    <!--表格的js-->
    <script type="application/javascript">

        //初始化数据
        const data = [
            [0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0]
        ];

        //选项卡1--计算点积-----------------------------------------
        //点击按钮生成表格
        var but_shape_1 = document.getElementById("but_shape_1");
        but_shape_1.onclick = showTableFromShape_1;

        //定义矩阵行列数
        var input_rowNum_1_a = document.getElementById("input_rowNum_1_a");
        var input_colNum_1_a = document.getElementById("input_colNum_1_a");
        var input_rowNum_1_b = document.getElementById("input_rowNum_1_b");
        var input_colNum_1_b = document.getElementById("input_colNum_1_b");


        const myTable_1_a = document.getElementById('myTable_1_a');
        const ht_1_a = new Handsontable(myTable_1_a, {
            data: data,
            rowHeaders: true,
            colHeaders: function (index) {
                return index + 1;
            },
            licenseKey: 'non-commercial-and-evaluation'
        });

        const myTable_1_b = document.getElementById('myTable_1_b');
        const ht_1_b = new Handsontable(myTable_1_b, {
            data: data,
            rowHeaders: true,
            colHeaders: function (index) {
                return index + 1;
            },
            licenseKey: 'non-commercial-and-evaluation'
        });

        const myTable_1_r = document.getElementById('myTable_1_r');
        const ht_1_r = new Handsontable(myTable_1_r, {
            data: data,
            rowHeaders: true,
            colHeaders: function (index) {
                return index + 1;
            },
            licenseKey: 'non-commercial-and-evaluation'
        });

        function showTableFromShape_1() {

            var rowNum_1_a = input_rowNum_1_a.value;
            var colNum_1_a = input_colNum_1_a.value;
            var rowNum_1_b = input_rowNum_1_b.value;
            var colNum_1_b = input_colNum_1_b.value;

            var data_1_a = new Array();
            for (var k = 0; k < rowNum_1_a; k++) {
                data_1_a[k] = new Array();
                for (var j = 0; j < colNum_1_a; j++) {
                    data_1_a[k][j] = 0;
                }
            }

            var data_1_b = new Array();
            for (var q = 0; q < rowNum_1_b; q++) {
                data_1_b[q] = new Array();
                for (var t = 0; t < colNum_1_b; t++) {
                    data_1_b[q][t] = 0;
                }
            }

            ht_1_a.updateSettings({
                data: data_1_a
            });

            ht_1_b.updateSettings({
                data: data_1_b
            });

        }

        //点击按钮计算显示结果
        var but_result_1 = document.getElementById("but_result_1");
        but_result_1.onclick = getResult_1;

        function getResult_1() {
            //从表格中取数据
            var data_1_a = ht_1_a.getData();
            var data_1_b = ht_1_b.getData();
            var data_1_r = math.multiply(data_1_a, data_1_b);

            console.log(data_1_r);

            ht_1_r.updateSettings({
                data: data_1_r
            });
        }

        //选项卡1--计算点积==============================================

    </script>

</body>

<!--tab选项卡代码-->
<!--layui的非模块化的js-->
<script type="text/javascript">
    layui.use('element', function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    ,
                    content: '内容' + (Math.random() * 1000 | 0),
                    id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            },
            tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”

                othis.addClass('layui-btn-disabled');
            },
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>


</html>